import React, { useEffect, useState } from "react";
import './partyHome.css'
import { Button, Space, Swiper, Toast, InfiniteScroll, List } from 'antd-mobile'
import { useNavigate } from "react-router-dom";
import { sleep } from 'antd-mobile/es/utils/sleep'
import axios from "axios";
export default function () {
    const navigate = useNavigate()
    const imgs = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac']
    const items = imgs.map((color, index) => (
        <Swiper.Item key={index}>
            <div
                className='party-content-imgs'
                style={{ background: color }}
                onClick={() => {
                    Toast.show(`你点击了卡片 ${index + 1}`)
                }}
            >
                {index + 1}
            </div>
        </Swiper.Item>
    ))

    const [data, setData] = useState([])
    const [hasMore, setHasMore] = useState(true)
    const [pageNum, setPageNum] = useState(true)
    async function loadMore() {
        const data = await axios.get('http://localhost:3000/ycf/getMerchant', {
            params: {
                page: pageNum,
                limit: 5,
            }
        }).then(async (val) => {
            await sleep(1000)
            let { data: { data } } = val
            return data
        })
        setData(val => [...val, ...data])
        setHasMore(data.length > 0)
        setPageNum(pageNum + 1)
    }

    const [cate, setCate] = useState([])
    const getCate = async() =>{
        let res = await axios.get('http://localhost:3000/ycf/getMerchantType')
        if(res.data.code == 200){
            setCate(res.data.data)
        }
    }

    useEffect(()=>{
        getCate()
    },[])


    return (
        <div>
            <div className="party-content-top">
                <div className="party-content-top1">
                    <span
                        className="party-content-left"
                        onClick={() => {
                            navigate('/switchCities')
                        }}>城市</span>
                    <input type="text" className="partyInput" />
                </div>
            </div>
            <div className="party-content-center">
                <Swiper
                    loop
                    autoplay
                >
                    {items}
                </Swiper>
            </div>
            <div className="party-content-down">
                <div className="party-content-options">
                    {cate.map((item)=>{
                        return <div className='party-content-options-children'key={item._id}>
                           
                            
                            <div>
                            <img src={item.img} alt="" />
                            </div>
                            <div style={{width:70, textAlign:"center"}}>
                                <span >{item.title}</span>
                            </div>
                        </div>
                    })}
                </div>
                <div className="party-content-list">
                    <div className="party-content-list-title">

                    </div>
                    <div className="party-content-list-content">
                        {data.map((item, index) => {
                            return <div className="party-content-list-content-children" 
                            key={item._id}
                            onClick={()=>{
                                navigate('/shopDetail', {state:item._id})
                            }}
                            >
                                <div className="list-content-img">
                                    <img className="list-content-img-children" src={item.doorPhotoImgUrl}></img>
                                </div>
                                <div className="list-content-text">
                                    <p style={{fontSize:20,marginBottom:10}}>{item.store}</p>
                                    <span style={{fontSize:16}}>{item.detailAddr}</span>
                                    <p style={{fontSize:16,marginTop:5}}>{item.businessTime}</p>
                                    <div className="list-content-text-1">
                                        {item.coupons && item.coupons.length > 0 ? (
                                            item.coupons.map((coupon) => (
                                                <div key={coupon._id} className="coupon-i">
                                                    <p>{coupon.title}</p>
                                                </div>
                                            ))
                                        ) : (
                                            <span>没有可用的优惠券</span>
                                        )}
                                    </div>
                                </div>
                            </div>
                        })}
                        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
                    </div>
                </div>
            </div>
        </div>
    )
}